
<html> 
<head> 
<title>input test</title> 
<style type="text/css"> 
.default { 
	font-weight:bold; 
	color:#787878; 
} 
.puton{ 
	font-weight:normal; 
	color:black; 
} 
</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
	$(document).ready(function(){ 
		var b=true; 
		$("#username").click(function(){ 
			if(b==true){ 
				$(this).val(""); 
				$(this).attr("class","puton"); 
				b=false; 
			} 
		}) 
		$("#username").blur(function(){ 
			if( $(this).val()==""){ 
				$(this).val("Enter your name"); 
				$(this).attr("class","default"); 
				b=true; 
			} 
		}) 
	}); 
	$(document).ready(function(){ 
		var b=true; 
		$("#password").click(function(){ 
			if(b==true){ 
				$(this).val(""); 
				$(this).attr("type","password"); 
				$(this).attr("class","puton"); 
				b=false; 
			} 
		}) 
		$("#password").blur(function(){ 
			if( $(this).val()==""){ 
				$(this).val("Enter your password"); 
				$(this).attr("type","text"); 
				$(this).attr("class","default"); 
				b=true; 
			} 
		}) 
	 }); 
</script> 
</head> 
<body> 
<div id="content"> 
<form method="POST" id="user" action=""> 
User Name:<input type="text" id="username" class="default" name="username" value="Enter your name" /><br/> 
PassWord:<input type="text" id="password" class="default" name="password" value="Enter your password" /> 
<input type="submit" name="sub" value="login" /> 
</form> 
</div> 
</body> 
</html> 